<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-form :inline="true" :model="formInline" class="search">
            <el-form-item  label="搜索：">
                <el-input v-model="formInline.goodsName" placeholder="商品名称"></el-input>
            </el-form-item>
            <el-form-item >
                <el-input v-model="formInline.goodsId" placeholder="商品代码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button type="primary" icon="el-icon-plus" @click="handleAdd">添加</el-button>
            </el-form-item>
        </el-form>
        <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
                prop="goodsName"
                label="商品名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="goodsId"
                label="商品代码">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination style="margin-top:20px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[2,10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>

        <!-- 添加的弹出框 -->
        <el-dialog :title="titleDialog" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="商品名称" label-width="120px">
                    <el-input v-model="form.goodsName" autocomplete="off" placeholder="请输入商品名称"></el-input>
                </el-form-item>
                <el-form-item label="商品代码" label-width="120px">
                    <el-input v-model="form.goodsId" autocomplete="off" placeholder="请输入商品代码"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name:'Goods',
    data() {
      return {
        formInline: {
            goodsName: '',
            goodsId: '',
        },
        tableData: [],
        pageSize:2,
        currentPage:1,
        total:0,
        dialogFormVisible: false,
        titleDialog:'添加',
        form:{
            goodsName: '',
            goodsId: '',
        },
        isEdit: false,
        indexTb: 0,
      }
    },
    created(){
        // 获取初始化数据
        this.getData()
    },
    methods: {
        // 初始化数据
        getData(params){
            console.log('getData收到的参数',params)
            let res = {
            code: 0,
            msg: null,
            count: 3,
            data: [
                {
                    addUser: null,
                    editUser: null,
                    addTime: 1521062371000,
                    editTime: 1526700200000,
                    deptId: 2,
                    deptName: 'XX分公司',
                    deptNo: '1',
                    parentId: 1,
                    goodsName:'可乐',
                    goodsId:'010010',
                },
                {
                    addUser: null,
                    editUser: null,
                    addTime: 1521062371000,
                    editTime: 1526700200000,
                    deptId: 2,
                    deptName: 'XX分公司',
                    deptNo: '1',
                    parentId: 1,
                    goodsName:'雪碧',
                    goodsId:'020020',
                },
                {
                    addUser: null,
                    editUser: null,
                    addTime: 1521062371000,
                    editTime: 1526700200000,
                    deptId: 2,
                    deptName: 'XX分公司',
                    deptNo: '1',
                    parentId: 1,
                    goodsName:'红茶',
                    goodsId:'030030',
                }
            ]
          }
          if(params != undefined && (params.goodsId != '' || params.goodsName != '')) {
            // 查询 过滤数据
            this.tableData = res.data.filter((item)=>{
                return item.goodsName.indexOf(params.goodsName)>=0  &&  item.goodsId.indexOf(params.goodsId) >= 0
            })
          } else {
            this.tableData = res.data
            this.total = res.count
          }
        },
        // 查询
        onSubmit(){
            this.getData(this.formInline)
        },
        // 添加
        handleAdd() {
            this.titleDialog = '添加'
            this.dialogFormVisible = true
            this.isEdit = false
        },
        // 每页数变化
        handleSizeChange(val) {
            let arr = this.tableData
            console.log(`每页 ${val} 条`);
            this.pageSize = val
            this.tableData = arr.slice((this.currentPage-1)*val,this.currentPage*val)
        },
        // 当前页变化
        handleCurrentChange(val) {
            let arr = this.tableData
            console.log(`当前页: ${val}`);
            this.tableData = arr.slice((val-1)*this.pageSize,val*this.pageSize)
        },
        // 提交dialog
        submit(){
            console.log(this.form)
            let obj = JSON.parse(JSON.stringify(this.form))
            if(this.isEdit) {//修改
                this.tableData.splice(this.indexTb,1,obj)
            } else {// 添加
                this.tableData.unshift(obj)
            }
            this.dialogFormVisible = false
            this.form.goodsId = ''
            this.form.goodsName = ''
        },
        // 编辑
        handleEdit(index,row) {
            // console.log(index,row);
            this.titleDialog = '修改'
            this.dialogFormVisible = true
            this.isEdit = true
            this.form = row
            this.indexTb = index
        },
        handleDelete(index,row) {
            this.tableData.splice(index,1)
        },
        cancel() {
            this.dialogFormVisible = false
            this.form.goodsId = ''
            this.form.goodsName = ''
        }
        
    }
}
</script>

<style scoped>
.search{
    margin-top: 20px
}
</style>